<script setup>
import { getTopRateMovie,getHomeHotMovie,getManhua } from '../../api/home';
import { onMounted,reactive } from 'vue';
import MovieInfo from '../MovieInfo.vue'
const data = reactive({
    movieList:[],
    hotList:[]
})

onMounted(()=>{
    getTopRateMovie().then(res=>{
        console.log('最受好评电影',res);
        data.movieList = res.data.movieList
    })

    getHomeHotMovie().then(res=>{
        console.log('热映列表',res);
        data.hotList = res.data.movieList
    })

    // getManhua().then(res=>{
    //     console.log('res',res);
        
    // })
})
</script>
<template>
    <div class="hot-movie">
        <div class="top-pop">
            <div class="top-title">最受好评电影</div>
            <div class="top-rate-list">
                <router-link  
                class="top-rate-item" 
                v-for="item in data.movieList"
                :key="item.movieId"
                :to="'/detail?movieId='+item.movieId"
                >
                    <div class="poster">
                        <img :src="item.poster" alt="">
                        <div class="rate">
                            <span>观众评分</span>
                            <span class="score">{{ item.score }}</span>
                        </div>
                    </div>
                    <p>{{ item.name }}</p>
                </router-link>
            </div>
        </div>
        <div class="bg-bar"></div>

        <MovieInfo :list="data.hotList"></MovieInfo>
        <div class="blank"></div>
    </div>
</template>
<style scoped lang="scss">
::-webkit-scrollbar{
    display: none;
}
.hot-movie{
    padding: 15px ;

    .top-pop{
        padding-bottom: 20px;
        .top-title{
            font-size: 14px;
            color: #333;
        }

        .top-rate-list{
            display: flex;
            margin-top: 12px;
            overflow-x: auto;
            
            .top-rate-item{
                margin-right: 10px;
                width: 80px;
                .poster{
                    width: 80px;
                    height: 115px;
                    position: relative;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                    }

                    .rate{
                        position: absolute;
                        bottom: 0px;
                        width: 100%;
                        font-size: 11px;
                        color: #FAAf00;
                        font-weight: 600;
                        background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000);
                        height: 35px;
                        line-height: 50px;
                        padding-left: 5px;
                        .score{
                            margin-left: 5px;
                            font-weight: 800;
                        }
                    }
                }

                p{
                    font-size: 13px;
                    color: #222;
                    margin-top: 10px;
                    font-weight: 600;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: break-all;
                }
            }
        }
    }

    .bg-bar{
        background-color: #f5f5f5;
        width: 375px;
        margin-left: -15px;
        height: 10px;
    }
}

.blank{
    width: 100%;
    height: 50px;
}
</style>